<template>
	<view class="lawyer">
		<view class="lawyer-top">
			<text>找律师</text>
			<!-- 标签页 -->
			<view class="inv-h-w">
				<tui-tabs :tabs="tabs"
					:currentTab="currentTab" 
					@change="changes" 
					width="250"
					bold="true"
					selectedColor="black"
					sliderWidth="50"
					sliderBgColor="black"
					backgroundColor="#EDEDED"
					></tui-tabs>
			</view>
			<!-- 搜索栏 -->
			<view class="lawyer-top-view">
				<tui-button shape="circle" plain link type="primary" width="240rpx" height="72rpx" size="28" @click="open">
					<view class="aaa">
						<text>{{ values }}</text>
						<tui-icon name="turningdown" color="#383838" :size="24"></tui-icon>
					</view>
				</tui-button>
				<view class="fenge"></view>
				<van-field
					:value="textinput"
					placeholder="律师姓名"
					@confirm="onChange"
				/>
			</view>
		</view>
		<!-- 标签页内容 -->
			<view class="tabs" v-if="currentTab == 0">
				<scroll-view scroll-y="true" @scroll="handleScroll" style="height: 600px;">
					<view class="bbb" v-for="i in 10">
						<tui-collapse v-for="(item,index) in dataList" :key="index" :arrow="false" :index="index" :current="item.current" :disabled="!item.is_vip" @click="change">
							<template v-slot:title>
									<view class="profile">
										<image :src="item.image" mode="" style="width: 80rpx; height: 80rpx;" @click.stop="grxx(item)"></image>
										<view class="profile-view">
											<view class="profile-view-text">
												<text style="font-size: 28rpx;font-weight: bold;line-height: 32rpx; color: #616C9A;">{{item.name}}</text>
												<text style="font-size: 22rpx; color: #383838; margin: 0 22rpx 0 2rpx;">律师</text>
												<text style="font-size: 22rpx; color: #383838;">{{item.num}}</text>
											</view>
											<view class="profile-view-twotext">
												<text class="text1">解答<text style="color: red;">{{item.answerCount}}</text></text>
												<text class="text1">好评率 <text style="color: red;">{{item.rate}}</text></text>
												<text class="text1">感谢 <text style="color: red;">{{item.loveCount}}</text></text>
											</view>
										</view>
										<view class="a1">
											<image :src="item.current === index ? image2 : image1 " mode="" style="width: 48rpx; height: 48rpx;"></image>
										</view>
									</view>
							</template>
							<template v-slot:content>
								<view class="tui-content">
									<view class="profile-six">
											<view class="profile-six-one">
												<image src="../../static/健康咨询@2x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
												<text class="profile-six-one-text1">私问</text>
												<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count2}}次</text>
											</view>
											<view class="profile-six-one">
												<image src="../../static/入学考试@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
												<text class="profile-six-one-text1">文书代写</text>
												<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count6}}次</text>
											</view>
											<view class="profile-six-one">
												<image src="../../static/20gl-phoneTime@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
												<text class="profile-six-one-text1">计时电话</text>
												<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count3}}次</text>
											</view>
											<view class="profile-six-one">
												<image src="../../static/产品定位红.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
												<text class="profile-six-one-text1">户籍调查</text>
												<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count8}}次</text>
											</view>
											<view class="profile-six-one">
												<image src="../../static/洗钱审查@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
												<text class="profile-six-one-text1">合同审查</text>
												<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count5}}次</text>
											</view>
											<view class="profile-six-one">
												<image src="../../static/线下见面@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
												<text class="profile-six-one-text1">约见律师</text>
												<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count4}}次</text>
											</view>
										</view>
								</view>
							</template>
						</tui-collapse>
					</view>
				</scroll-view>
			</view>
			<view class="tabs" v-if="currentTab == 1">
				<view v-for="(item,index) in dataList" :key="index" class="bbb">
					<tui-collapse :arrow="false" :index="index" :current="item.current" :disabled="!item.is_vip" @click="change">
						<template v-slot:title>
								<view class="profile">
									<image :src="item.image" mode="" style="width: 80rpx; height: 80rpx;" @click.stop="grxx(item)"></image>
									<view class="profile-view">
										<view class="profile-view-text">
											<text style="font-size: 28rpx;font-weight: bold;line-height: 32rpx; color: #616C9A;">{{item.name}}</text>
											<text style="font-size: 22rpx; color: #383838; margin: 0 22rpx 0 2rpx;">律师</text>
											<text style="font-size: 22rpx; color: #383838;">{{item.num}}</text>
										</view>
										<view class="profile-view-twotext">
											<text class="text1">解答<text style="color: red;">{{item.answerCount}}</text></text>
											<text class="text1">好评率 <text style="color: red;">{{item.rate}}</text></text>
											<text class="text1">感谢 <text style="color: red;">{{item.loveCount}}</text></text>
										</view>
									</view>
									<view class="a1">
										<image :src="item.current === index ? image2 : image1 " mode="" style="width: 48rpx; height: 48rpx;"></image>
									</view>
								</view>
						</template>
						<template v-slot:content>
							<view class="tui-content">
								<view class="profile-six">
										<view class="profile-six-one">
											<image src="../../static/健康咨询@2x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">私问</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count2}}次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/入学考试@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">文书代写</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count6}}次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/20gl-phoneTime@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">计时电话</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count3}}次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/产品定位红.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">户籍调查</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count8}}次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/洗钱审查@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">合同审查</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count5}}次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/线下见面@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">约见律师</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count4}}次</text>
										</view>
									</view>
							</view>
						</template>
					</tui-collapse>
				</view>
			</view>
			<view class="tabs" v-if="currentTab == 2">
				<view v-for="(item,index) in dataList" :key="index" class="bbb">
					<tui-collapse :arrow="false" :index="index" :current="item.current" :disabled="!item.is_vip" @click="change">
						<template v-slot:title>
								<view class="profile">
									<image :src="item.image" mode="" style="width: 80rpx; height: 80rpx;" @click.stop="grxx(item)"></image>
									<view class="profile-view">
										<view class="profile-view-text">
											<text style="font-size: 28rpx;font-weight: bold;line-height: 32rpx; color: #616C9A;">{{item.name}}</text>
											<text style="font-size: 22rpx; color: #383838; margin: 0 22rpx 0 2rpx;">律师</text>
											<text style="font-size: 22rpx; color: #383838;">{{item.num}}</text>
										</view>
										<view class="profile-view-twotext">
											<text class="text1">解答<text style="color: red;">{{item.answerCount}}</text></text>
											<text class="text1">好评率 <text style="color: red;">{{item.rate}}</text></text>
											<text class="text1">感谢 <text style="color: red;">{{item.loveCount}}</text></text>
										</view>
									</view>
									<view class="a1">
										<image :src="item.current === index ? image2 : image1 " mode="" style="width: 48rpx; height: 48rpx;"></image>
									</view>
								</view>
						</template>
						<template v-slot:content>
							<view class="tui-content">
								<view class="profile-six">
										<view class="profile-six-one">
											<image src="../../static/健康咨询@2x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">私问</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count2}}次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/入学考试@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">文书代写</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count6}}次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/20gl-phoneTime@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">计时电话</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count3}}次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/产品定位红.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">户籍调查</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count8}}次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/洗钱审查@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">合同审查</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count5}}次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/线下见面@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">约见律师</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count4}}次</text>
										</view>
									</view>
							</view>
						</template>
					</tui-collapse>
				</view>
			</view>
			<view class="tabs" v-if="currentTab == 3">
				<view v-for="(item,index) in dataList" :key="index" class="bbb">
					<tui-collapse :arrow="false" :index="index" :current="item.current" :disabled="!item.is_vip" @click="change">
						<template v-slot:title>
								<view class="profile">
									<image :src="item.image" mode="" style="width: 80rpx; height: 80rpx;" @click.stop="grxx(item)"></image>
									<view class="profile-view">
										<view class="profile-view-text">
											<text style="font-size: 28rpx;font-weight: bold;line-height: 32rpx; color: #616C9A;">{{item.name}}</text>
											<text style="font-size: 22rpx; color: #383838; margin: 0 22rpx 0 2rpx;">律师</text>
											<text style="font-size: 22rpx; color: #383838;">{{item.num}}</text>
										</view>
										<view class="profile-view-twotext">
											<text class="text1">解答<text style="color: red;">{{item.answerCount}}</text></text>
											<text class="text1">好评率 <text style="color: red;">{{item.rate}}</text></text>
											<text class="text1">感谢 <text style="color: red;">{{item.loveCount}}</text></text>
										</view>
									</view>
									<view class="a1">
										<image :src="item.current === index ? image2 : image1 " mode="" style="width: 48rpx; height: 48rpx;"></image>
									</view>
								</view>
						</template>
						<template v-slot:content>
							<view class="tui-content">
								<view class="profile-six">
										<view class="profile-six-one">
											<image src="../../static/健康咨询@2x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">私问</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count2}}次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/入学考试@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">文书代写</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count6}}次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/20gl-phoneTime@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">计时电话</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count3}}次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/产品定位红.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">户籍调查</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count8}}次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/洗钱审查@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">合同审查</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count5}}次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/线下见面@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">约见律师</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">{{item.count4}}次</text>
										</view>
									</view>
							</view>
						</template>
					</tui-collapse>
				</view>
			</view>
		<image src="../../static/分组 8@1x.png" mode="" class="lay-img" @click="mfzxHandler"></image>
		<van-popup :show="show" round position="bottom">
			<van-area :area-list="areaList" columns-num="2" @cancel="Close2" @confirm="Finish2" />
		</van-popup>
	</view>
	<fourbar mycurrent="2"></fourbar>
</template>

<script>
	import { areaList } from '@vant/area-data';
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiButton from "@/components/thorui/tui-button/tui-button.vue"
	import tuiCollapse from "@/components/thorui/tui-collapse/tui-collapse.vue"
	import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs.vue"
	import { lawyerList } from "../../utils/utils"
	export default {
		components:{
			tuiIcon, tuiButton, tuiCollapse, tuiTabs
		},
		data() {
			const options = [
				{
				  text: '全国',
				  value: '310000',
				  children: [{ text: '全部', value: '310100' }],
				},
			  {
			    text: '浙江',
			    value: '330000',
			    children: [{ text: '杭州', value: '330100' }],
			  },
			  {
			    text: '江苏',
			    value: '320000',
			    children: [{ text: '南京', value: '320100' }],
			  },
			];
			return {
				image1: '../../static/分组 11@1x.png',
				image2: '../../static/分组 10@1x.png',
				show: false, // 全国弹出层
				values: '全国', // 输入框左侧显示的内容
				cascaderValue: '', // 省份数据
				areaList, // 全国数据
				options, // 数据
				dataList: [],
				currentTab: 0, // 标签页
				tabs: [{name: "活跃"}, {name: "关注"}, {name: "红包"}, {name: '好评'}],
				page: '1', // 页数
				province: '', // 省份
				city: '', // 市区
				textinput: '', // 输入框内容
			}
		},
		onLoad() {
			console.log(this.areaList);
			let a = {
				type: '1',
				page: this.page,
			}
			lawyerList(a, (e) => {
				console.log('律师列表', e);
				let arr = e.data.data.data
				console.log(arr);
				const newdata =  arr.map(item => ({
				  ...item, // 扩展运算符用来复制原对象的所有属性
				  current: -1, // 添加新的键值对
				}));
				this.dataList = newdata
			})
		},
		onReachBottom() {
			console.log('我滚动到底部了');
		},
		methods: {
			// 打开全国弹出层
			open () {
				this.show = true;
			},
			// 地区关闭逻辑
			Close2 () {
				this.show = false
			},
			// 地区逻辑
			Finish2(e) {
				// const { selectedOptions, value } = e.detail;
				// const fieldValue = selectedOptions
				// 	.map((option) => option.text || option.name)
				// 	.join(' ');
				// this.values = fieldValue
				console.log(e);
				this.show = false
			},
			// 折叠面板逻辑
			change(e) {
				let index = e.index;
				let item = this.dataList[index];
				item.current = item.current == index ? -1 : index
				// console.log(item);
			},
			// 标签页切换事情
			changes(e) {
				this.currentTab = e.index
				// console.log('e',e.index);
				// console.log(this.currentTab);
				switch(this.currentTab) {
					case 0: {
						let a = {
							type: String(this.currentTab + 1),
							page: '1',
						}
						lawyerList(a, (e) => {
							uni.showLoading({
								title: '正在获取数据'
							})
							setTimeout(() => {
								console.log('律师列表', e);
								let arr = e.data.data.data
								console.log(arr);
								const newdata =  arr.map(item => ({
								  ...item, // 扩展运算符用来复制原对象的所有属性
								  current: -1, // 添加新的键值对
								}));
								this.dataList = newdata
								uni.hideLoading()
							},1000)
						})
						break;
					}
					case 1: {
						let a = {
							type: String(this.currentTab + 1),
							page: '1',
						}
						lawyerList(a, (e) => {
							uni.showLoading({
								title: '正在获取数据'
							})
							setTimeout(() => {
								console.log('律师列表', e);
								let arr = e.data.data.data
								console.log(arr);
								const newdata =  arr.map(item => ({
								  ...item, // 扩展运算符用来复制原对象的所有属性
								  current: -1, // 添加新的键值对
								}));
								this.dataList = newdata
								uni.hideLoading()
							},1000)
						})
						break;
					}
					case 2: {
						let a = {
							type: String(this.currentTab + 1),
							page: '1',
						}
						lawyerList(a, (e) => {
							uni.showLoading({
								title: '正在获取数据'
							})
							setTimeout(() => {
								console.log('律师列表', e);
								let arr = e.data.data.data
								console.log(arr);
								const newdata =  arr.map(item => ({
								  ...item, // 扩展运算符用来复制原对象的所有属性
								  current: -1, // 添加新的键值对
								}));
								this.dataList = newdata
								uni.hideLoading()
							},1000)
						})
						break;
					}
					case 3: {
						let a = {
							type: String(this.currentTab + 1),
							page: '1',
						}
						lawyerList(a, (e) => {
							uni.showLoading({
								title: '正在获取数据'
							})
							setTimeout(() => {
								console.log('律师列表', e);
								let arr = e.data.data.data
								console.log(arr);
								const newdata =  arr.map(item => ({
								  ...item, // 扩展运算符用来复制原对象的所有属性
								  current: -1, // 添加新的键值对
								}));
								this.dataList = newdata
								uni.hideLoading()
							},1000)
						})
						break;
					}
				}
			},
			// 点击头像
			grxx (e) {
				// console.log(e);
				uni.navigateTo({
					url: `/pages/Attorney side/lawyerHome/lawyerHome?id=${e.id}`
				})
			},
			// 点击右下角图片
			mfzxHandler () {
				uni.navigateTo({
					url: "/pages/Attorney side/consult/consult?name=免费咨询"
				})
			},
			// 输入框
			onChange (e) {
				this.textinput = e.detail
				console.log(this.textinput);
				console.log(this.currentTab);
				let a = {
					type: this.currentTab + 1,
					page: this.page,
					name: this.textinput,
					provice: this.province,
					city: this.city
				}
				console.log(123);
				lawyerList(a, (e) => {
					console.log('律师列表', e);
					let arr = e.data.data.data
					console.log(arr);
					console.log(456);
					const newdata =  arr.map(item => ({
					  ...item, // 扩展运算符用来复制原对象的所有属性
					  current: -1, // 添加新的键值对
					}));
					this.dataList = newdata
				})
			},
			// 滚动
			handleScroll (e) {
				console.log(e);
				const scrollTop = e.detail.scrollTop;
				const scrollHeight = e.detail.scrollHeight; // 滚动视图内容高度
				const windowHeight = e.detail.clientHeight; // 滚动视图可视区域高度
				// 判断是否滚动到底部，考虑一定的误差范围，比如100像素
				if (scrollTop >= 160) {
					// 如果已到达底部，则加载更多数据
					console.log('滚动到底部了');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lawyer {
		height: 85.5vh;
		width: 100vw;
		background-color: #EDEDED;
		padding-bottom: var(--safe-area-inset-bottom);
	}

	.lawyer-top {
		width: 750rpx;
		height: 366rpx;
		overflow: hidden;
	}

	.lawyer-top>text {
		display: block;
		margin: 108rpx 0 34rpx 328rpx;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 46rpx;
	}

	.lawyer-top-view {
		width: 714rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 72rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
	}
	::v-deep.van-cell {
		padding: 6px 15px;
	}
	.aaa {
		color: black;
		display: flex;
		align-items: center;
	}
	::v-deep.tui-icon.data-v-096cf6db {
		display: flex;
		align-items: center;
	}
	
	.fenge {
		width: 2rpx;
		height: 32rpx;
		background: #CCCCCC;
	}

	.inv-h-w {
		display: flex;
		justify-content: center;
		margin-bottom: 12rpx;
	}

	.container {
		width: 710rpx;
		/* height: 144rpx; */
		height: 288rpx;
		margin: 12rpx auto;
		overflow: hidden;
	}

	.profile {
		width: 430rpx;
		height: 72px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 20rpx;
		border-radius: 12px;
	}
	
	.profile > image {
		width: 80rpx;
	}
	.profile-view {
		width: 332rpx;
		height: 66rpx;
		font-weight: bold;
		line-height: 32rpx;
		display: flex;
		flex-direction: column;
		margin-left: 16rpx;
	}

	.text1 {
		font-size: 22rpx;
		line-height: 26rpx;
		color: #A6A6A6;
	}

	.profile-view-twotext {
		display: flex;
		justify-content: space-between;
	}

	.a1 {
		position: relative;
		top: 0;
		left: 120px;
	}
	
	.profile-six {
		width: 668rpx;
		height: 128rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.profile-six-one {
		width: 108rpx;
		height: 128rpx;
		border-radius: 8rpx;
		background-color: #EFEFEF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.profile-six-one-text1 {
		font-size: 20rpx;
		line-height: 24rpx;
		text-align: center;
		color: #383838;
		margin: 8rpx 0 0 4rpx;
	}
	
	.lay-img {
		width: 100rpx;
		height: 100rpx;
		position: fixed;
		right: 24rpx;
		bottom: 200rpx;
		z-index: 2;
	}
	
	.tui-content {
		height: 90px;
		background-color: white;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 12px;
	}
	.tabs {
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow-y: auto;
		height: calc(100vh - 366rpx);
	}
	.bbb {
		width: 95vw;
		margin-bottom: 6px;
		border-radius: 12px;
	}
	
	.text1.data-v-c1171ef3 {
		font-size: 21rpx;
	}
</style>